<template>
	<view class="pay_checkstand_warp">
		<Header leftPathType="navigateTo" leftPath="/pages/recharge/recharge" :title="$t('recharge.pay.title')"/>
		<view class="pay_checkstand_content">
			<view class="_content_amount_">
				<text class="_content_amount_amount">{{orderObj.amount || 0}}</text>
				<text class="_content_amount_usd">USDT</text>
				<up-image src="/static/pay/u.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
			</view>
			<view class="_content_msg_">{{$t('recharge.pay.amount')}}</view>
			<view class="_content_usd_">
				<view class="_content_usd_code">
					<up-image :src="orderObj.qrcode" width="200" height="200" bgColor="#f1f6ff00"></up-image>
					<view class="_content_usd_code_save" @click="saveBaseImgFile(orderObj.qrcode)">{{$t('recharge.pay.save.image')}}</view>
				</view>
				<view class="_content_usd_info">
					<view class="_content_usd_info_item">
						<view class="_content_usd_info_item_title">{{$t('recharge.pay.recharge.number')}}</view>
						<view class="_content_usd_info_item_right">
							{{orderObj.orderNo}}
						</view>
					</view>
					<view class="_content_usd_info_item_fg"></view>
					<view class="_content_usd_info_item">
						<view class="_content_usd_info_item_title">{{$t('recharge.pay.payment.currency')}}</view>
						<view class="_content_usd_info_item_right">
							<up-image src="/static/pay/u.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
							<view class="_right_usd">USDT</view>
						</view>
					</view>
					<view class="_content_usd_info_item_fg"></view>
					<view class="_content_usd_info_item">
						<view class="_content_usd_info_item_title">{{$t('recharge.pay.trc.address')}}</view>
						<view class="_content_usd_info_item_right">
							<view class="_right_address">{{orderObj.blockchain || $t('recharge.pay.trc.address.no')}}</view>
							<up-image src="/static/comm/copy.png" width="18" height="18" bgColor="#f1f6ff00" @click="copyData(orderObj.blockchain)"></up-image>
						</view>
					</view>
				</view>
			</view>
			<!-- 凭证-->
			<view class="_content_certificate">
				<view class="_content_certificate_title">{{$t('recharge.pay.add.transfer.voucher')}}</view>
				<up-image v-if="form.proofImg" :src="form.proofImg" width="40" height="40" bgColor="#f1f6ff00" @click="phoneFun"></up-image>
				<up-image v-else src="/static/comm/phone.png" width="40" height="40" bgColor="#f1f6ff00" @click="phoneFun"></up-image>
			</view>
			<!-- 哈希值 -->
			<view class="_content_common">
				<view class="_content_title_common">{{$t('recharge.pay.hash')}}</view>
				<up-input
					:placeholder="$t('recharge.pay.hash.recharge')"
					border="surround"
					v-model="form.tradeId"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="_content_but">
				<view class="_content_but_cancel" @click="cancelFun">{{$t('recharge.pay.cancel.order')}}</view>
				<view class="_content_but_ok" @click="okFun">{{$t('recharge.pay.yes.order')}}</view>
			</view>
		</view>
		<!-- 转账成功提示 -->
		<up-popup
			:show="payOkShow" 
			:round="10" 
			mode="bottom" 
			@close="checkPayOkShow(false)" 
			@open="checkPayOkShow(true)"
			:customStyle="{
				'height':'900rpx',
				'padding':'30rpx 30rpx 60rpx',
			}"
		>
			<view class="select_address_warp">
				<view class="select_address_title">
					{{$t('recharge.pay.order.status.tracking')}}
				</view>
				<view class="select_address_content"> 
					<view style="margin-top: 100rpx;">
						<up-loading-icon size="60"></up-loading-icon>
					</view>
					<view class="address_templ">
						<view class="content_1">{{$t('recharge.pay.order.status.tracking.content1')}}</view>
						<view class="content_2">{{$t('recharge.pay.order.status.tracking.content2')}}</view>
						<view class="content_2">{{$t('recharge.pay.order.status.tracking.content3')}}</view>
					</view>
					<view class="but_comm_warp" @click="returnMine">{{$t('recharge.pay.return.mine')}}</view>
				</view>
			</view>
		</up-popup>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { copyData } from '@/utils/index.js';
	import { cancelRecharge,getRechargeOrder,feedback } from '@/api/finance.js';
	import { uploadImage,uploadImg } from '@/api/common.js';
	import { IMG_TYPE } from '@/utils/enumUtils.js';
	import { BASE_URL,Authorization } from '@/utils/config.js';
	import {getStorageFun,TOKEN_NAME} from '@/utils/auth.js';
	import { saveBaseImgFile } from '@/utils/index.js';
		
		
	export default {
		components:{Header},
		data() {
			return {
				orderObj:{},// 充值订单
				form:{
					id:0,
					proofImg:'',// 凭证
					tradeId:'',// 交易哈希
				},
				payOkShow:false,
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
			};
		},
		onLoad(option) {
			const id = option.id;
			console.log("id",id);
			if(id && id !=="null"){
				this.form.id = id;
				this.getRechargeOrderFun();
			}
		},
		methods: {
			saveBaseImgFile,
			copyData,
			/**
			 * 查询订单详情
			 */
			async getRechargeOrderFun(){
				const params={
					id:this.form.id,
				}
				const resp = await getRechargeOrder(params);
				if(resp && resp.bizcode === 100){
					this.orderObj = resp.data;
				}
			},
			phoneFun(){
				let that = this;
				/*#ifdef MP*/
					uni.chooseMedia({
						count: 1, // 默认为1，摄像头拍照为1，录像为10，录音为1
						mediaType: ['image'], // 可以指定是摄像头还是录像，这里两者都支持
						sourceType: ['camera'], // 可以指定来源是相册还是相机，这里只选相机
						camera: 'back', // 可以指定使用前置还是后置摄像头，默认后置
						success: (imgRes) => {
							// 成功则返回文件的本地临时文件路径
							const filePath = imgRes.tempFiles[0].tempFilePath; // 获取文件路径
							that.uploadFile(filePath);
						},
						fail: (err) => {
						  // 处理错误
						  console.error(err);
						}
				   });
				/*#endif*/
				/*#ifdef APP-PLUS*/
					uni.chooseImage({
						count: 1, // 默认9，设置图片的数量
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function (res) {
							// 成功选择图片后
							const filePath = res.tempFilePaths[0]; // 获取文件路径
							that.uploadFile(filePath);
						}
					});
				/*#endif*/
				
			},
			uploadFile(url){
				const that = this;
				uni.showLoading({
				  title: that.$t('common.upload.loading'),
				})
				const token = getStorageFun(TOKEN_NAME); // 获取token, 根据实际情况调整获取方式
				// 成功则返回文件的本地临时文件路径
				uni.uploadFile({
					url: BASE_URL+uploadImg, // 替换为你的上传接口URL
					filePath:url,
					name: 'file',
					formData: {
						'type': IMG_TYPE.COMMON,
					},
					header:{
						'CS-AUTH': token ? token : '',
					},
					success: (uploadFileRes) => {
						const data = JSON.parse(uploadFileRes.data);
						if(data.bizcode === 100){
							that.form.proofImg = data.data.dbUrl
						}else{
							uni.showToast({
								title: that.$t('common.image.upload.error'),
								icon: 'none',
								mask: true,
								duration:3000,
							})
						}
					},
					fail: (uploadFileErr) => {
						uni.showToast({
							title: that.$t('common.image.upload.error'),
							icon: 'none',
							mask: true,
							duration:3000,
						})
					},
					complete: (res) => {
					  // 请求完成以后做一些事情
					  uni.hideLoading();
					}
				});
			},
		
			/**
			* 取消
			*/
			 cancelFun(){
				const then = this;
				uni.showModal({
					title: then.$t('common.warm.reminder'), // 模态框的标题
					content: then.$t('common.cancel.order'), // 模态框的内容
					showCancel: true, // 是否显示取消按钮
					cancelText: then.$t('common.cancel'), // 取消按钮的文字，默认为“取消”
					cancelColor: '#000000', // 取消按钮的文字颜色，默认为黑色
					confirmText: then.$t('common.confirm'), // 确定按钮的文字，默认为“确定”
					confirmColor: '#265FFF', // 确定按钮的文字颜色，默认为uni-app的绿色
					success: function (res) {
					  if (res.confirm) {
							then.cancelFunServer();
					  } 
					}
				});
			},
			
			async cancelFunServer(){
				const params={
					id:this.form.id,
				}
				const resp = await cancelRecharge(params);
				if(resp && resp.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t('common.cancel.ok'),
					});
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/mine/mine',
						})
					},2000)
				}
			},
			/**
			 * 确认订单
			 */
			async okFun(){
				const params=this.form;
				if(!params.proofImg){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('recharge.pay.upload.voucher'),
					});
					return;
				}
				if(!params.tradeId){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('recharge.pay.hash.recharge'),
					});
					return;
				}
				const resp = await feedback(params);
				if(resp && resp.bizcode === 100){
					this.checkPayOkShow(true)
				}
			},
			/**
			 * 切换支付成功提示的弹框
			 */
			checkPayOkShow(status){
				this.payOkShow = status;
			},
			/**
			 * 返回到个人中心
			 */
			returnMine(){
				this.checkPayOkShow(false);
				uni.switchTab({
					url:'/pages/mine/mine',
				})
			},
			
		}
	}
</script>

<style lang="scss">
.pay_checkstand_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	.pay_checkstand_content{
		padding: 30rpx;
		height: calc(100vh - 448rpx);
		overflow: auto;
		._content_amount_{
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: baseline;
		}
		._content_amount_amount{
			font-weight: bold;
			font-size: 100rpx;
			color: #333333;
		}
		._content_amount_usd{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin: 0 10rpx;
		}
		._content_msg_{
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			text-align: center;
		}
		._content_usd_{
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			margin-top: 20rpx;
			padding: 30rpx;
			background: #F5F5F5;
			border-radius: 20rpx;
			._content_usd_code{
				display: grid;
				justify-content: center;
				._content_usd_code_save{
					padding: 10rpx 20rpx;
					background-color: $app-policy-color;
					font-size: 20rpx;
					color: #FFFFFF;
					width: 50%;
					margin-top: 20rpx;
					text-align: center;
					border-radius: 10rpx;
					margin-left: 22%;
				}
			}
			._content_usd_info{
				margin-top: 40rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				._content_usd_info_item{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				._content_usd_info_item_fg{
					margin: 20rpx 0;
					border-top: 1rpx solid  #EEEEEE;
					width: 100%;
					height: 1rpx;
				}
				._content_usd_info_item_title{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					width: 80px;
				}
				._content_usd_info_item_right{
					display: flex;
					align-items: center;
					width: calc(100% - 80px);
					._right_usd{
						font-size: 32rpx;
						color: #333333;
						margin-left: 20rpx;
						font-weight: bold;
					}
					._right_address{
						margin-right: 20rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						width: calc(100% - 24px);
						word-wrap: break-word;
					}
				}
			}
		}
	
		._content_certificate{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #F5F5F5;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 20rpx;
			._content_certificate_title{
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
		}
	
		._content_but{
			position: fixed;
			bottom: 0;
			width: calc(100% - 50rpx);
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 500;
			font-size: 28rpx;
			._content_but_cancel{
				width: 30%;
				border-radius: 20rpx;
				border: 2rpx solid #3D3D3D;
				text-align: center;
				color: #333333;
				height: 46rpx;
				padding: 26rpx 0 20rpx;
			}
			._content_but_ok{
				width: 68%;
				text-align: center;
				background: #3D3D3D;
				border-radius: 20rpx;
				color: #FFFFFF;
				height: 50rpx;
				padding: 26rpx 0 20rpx;
			}
		}
	
	}

	.select_address_warp{
		height: 800rpx;
		overflow: auto;
		.select_address_title{
			text-align: center;
		}
		.select_address_content{
			margin-top: 20rpx;
		}
		.address_templ{
			text-align: center;
			.content_1{
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				margin: 100rpx 0 50rpx;
			}
			.content_2{
				font-size: 24rpx;
				color: #333333;
				margin-top: 10rpx;
			}
		}
	}

	.but_comm_warp{
		margin-top: 100rpx;
	}
	
	._content_common{
		margin-top: 30rpx;
	}
	._content_title_common{
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
}
</style>
